<template>
  <div class="cart">
    <van-nav-bar title="购物车">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-button v-if="!isLoading" type="primary" size="large" to="/login">请登录</van-button>
    <div v-else>
      <van-empty v-if="cartList==null" description="购物车空空的哦~去看看心仪的商品吧!" />
      <van-swipe-cell v-else v-for="(item,index) in cartList" :key="index">
        <van-card
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="'http://localhost:3000'+item.img"
          class="goods-card"
        >
          <template #footer>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
              @plus="plus(item.id)"
              @minus="minus(item.id)"
            />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)" />
        </template>
      </van-swipe-cell>
      <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { cartMinus } from "../../request";
export default {
  data() {
    return {
      checked: true,
      value: 1,
      userInfo: {},
      cartList: [],
      isLoading: false,
      price: 0
    };
  },
  created() {
    if (JSON.parse(localStorage.getItem("userInfo"))) {
      this.isLoading = true;
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.getData();
    }
  },
  methods: {
    getData() {
      this.$http
        .get("cartlist", { params: { uid: this.userInfo.uid } })
        .then(res => {
          this.cartList = res.data.list;
          this.getPrice();
        });
    },
    getPrice() {
      let price = 0;
      if (this.cartList) {
        this.cartList.forEach(item => {
          price += item.price * item.num;
        });
      }
      this.price = price * 100;
    },
    onSubmit() {},
    del(id) {
      Dialog.confirm({
        title: "提示",
        message: "确认删除吗,是否继续?"
      })
        .then(res => {
          this.doDel(id);
          this.getData();
          this.getPrice();
        })
        .catch(_ => {});
    },
    doDel(id) {
      this.$http.post("/cartdelete", { id }).then(res => {
        
      });
    },
    plus(id) {
      this.$http.post("/cartedit", { id, type: 2 }).then(res => {
        this.getPrice();
      });
    },
    async minus(id) {
      let res = await cartMinus({ id, type: 1 });
      this.getPrice();
    }
  }
};
</script>
<style>
.van-submit-bar__button {
  width: 110px;
  height: 40px;
}
.van-submit-bar {
  bottom: 50px;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
.cart .van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
}
</style>